<template>
  <BasicModal v-bind="$attrs" title="上传对账单" @register="registerModal" :helpMessage="['提示1', '提示2']" @ok="handleSubmit">
    <BasicForm @register="registerForm" style="margin-top: 50px; margin-left: 50px" />
  </BasicModal>
</template>
<script lang="ts" setup>

import { BasicModal, useModalInner } from '/@/components/Modal';

//引入依赖
import { useForm, BasicForm, FormSchema } from '/@/components/Form';
import { UploadTypeEnum } from '/@/components/Form/src/jeecg/components/JUpload';
//自定义表单字段
const formSchemas: FormSchema[] = [
  {
    //标题名称
    label: '订单id',
    //字段
    field: 'id',
    //组件 支持组件详见 components/Form/src/types/index.ts 中的 ComponentType
    component: 'Input',
    dynamicDisabled: true
  },
  {
    //标题名称
    label: '订单单号',
    //字段
    field: 'orderCode',
    //组件 支持组件详见 components/Form/src/types/index.ts 中的 ComponentType
    component: 'Input',
    dynamicDisabled: true
  },
  {
    label: '对账单',
    field: 'statementUrl',
    component: 'JUpload',
    componentProps: {
      fileType: UploadTypeEnum.file,
      biz: "stamentutl"
    },
    required: true,
  },
];

/**
 * BasicForm绑定注册;
 * useForm 是整个框架的核心用于表单渲染，里边封装了很多公共方法;
 * 支持（schemas: 渲染表单列，autoSubmitOnEnter：回车提交,submitButtonOptions：自定义按钮文本和图标等方法）；
 * 平台通过此封装，简化了代码，支持自定义扩展;
 */
const [registerForm, { setProps, resetFields, setFieldsValue, validate, updateSchema, scrollToField }] = useForm({
  //注册表单列
  schemas: formSchemas,
  //回车提交
  autoSubmitOnEnter: true,
  //不显示重置按钮
  showResetButton: false,
  //自定义提交按钮文本和图标
  submitButtonOptions: { text: '提交', preIcon: '' },
  //查询列占比 24代表一行 取值范围 0-24
  actionColOptions: { span: 17 },
  showActionButtonGroup: false,
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  //重置表单
  await resetFields();
  await setFieldsValue({
    ...data
  });
})
// Emits声明
const emit = defineEmits(['register', 'success']);
import { defHttp } from '/@/utils/http/axios';
async function handleSubmit() {
  try {
    let values = await validate();
    setModalProps({ confirmLoading: true });
    //提交表单
    defHttp.post({ url: "/xl/xlCustomerOrde/editOrder", params:values });
    //关闭弹窗
    closeModal();
    //刷新列表
    emit('success');
  } finally {
    setModalProps({ confirmLoading: false });
  }
}

</script>